//判断并获取页面存储的数据
const commodity = localStorage.getItem('mes')
const obj = JSON.parse(commodity)
console.log(obj);
let arr = []
arr.push(...obj)
console.log(arr)
// arr.forEach(e=>{})
//用存储的数据进行渲染
function rendon(arr1) {
    const newArr = arr1.reduce((prev, item, index) => {
        return prev + `   
         <tr data-index=${index}>
          <td>
                            <input type="checkbox" name="" id="small_checkbox">
                        </td>
                        <td>
                            <div>
                                <img src="${item.goodsPicture}" alt="">
                            </div>
                            <div>
                                <p class="name">${item.goodsName}</p>
                                <div class="cart-sku ">
                                    <div class="attrs">
                                        <span class="elli-psis">规格:${item.titleFir} </span>
                                        <i class="iconfont  icon-yx_icon_down"></i>
                                    </div>
                                    <div class="layer">
                                        <div class="goods-sku">
                                            <dl>
                                                <dt>规格</dt>
                                                <dd>
                                                    <span>
                                                    <img src="${item.specFir}"></span>
                                                    <span>
                                                    <img src="${item.specSec}"></span>
                                                    <span>
                                                    <img src="${item.specThr}"></span>
                                                </dd>
                                            </dl>
                                        </div>
                                        <button class="xtx-button">确认</button>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>￥<i class="unit_price">${item.goodsPrice}</i></td>
                        <td>
                            <div>
                                <a href="javascript:;"  data-name="minus">-</a>
                                <input type="text" value="${item.goodsCount}">
                                <a href="javascript:;" data-name="add">+</a>
                            </div>
                        </td>
                        <td class="red">￥<i class="total_price">${item.goodsCount * item.goodsPrice}</i></td>
                        <td>
                            <div class="pop_show">
                                <span>移入收藏夹</span>
                                <span data-name="del">删除</span>
                                <span>找相似</span>
                            </div>
                        </td>
                    </tr>
        `
    }, "")
    document.querySelector("tbody").innerHTML = newArr
    const totalCount = arr1.reduce((prev, e) => prev + +e.goodsCount, 0)
    document.querySelector(".count").innerHTML = totalCount

}
rendon(arr)



const allCheck = document.querySelector("#all_checkbox")
const smallCk = document.querySelectorAll("#small_checkbox")
const totalCk = document.querySelector("#total_checkbox")
// 让全选框的点击，影响下面的三个小选框
allCheck.addEventListener("change", function () {
    for (let i = 0; i < smallCk.length; i++) {
        smallCk[i].checked = totalCk.checked = allCheck.checked
    }
})
// 让全选框的点击，影响下面的三个小选框
totalCk.addEventListener("change", function () {
    for (let i = 0; i < smallCk.length; i++) {
        smallCk[i].checked = allCheck.checked = totalCk.checked
    }
})
// 让三个小选框的点击，影响全选框
for (let i = 0; i < smallCk.length; i++) {
    smallCk[i].addEventListener("change", function (e) {
        const flag = document.querySelectorAll("#small_checkbox:checked")
        allCheck.checked = flag.length === smallCk.length
        totalCk.checked = flag.length === smallCk.length
        arr[i].checked = e.target.checked
        localStorage.setItem("mes", JSON.stringify(arr))
        render(arr)
    })
}
function render() {
    let mes = localStorage.getItem("mes")
    JSON.parse(mes)
    const newArr = arr.filter(e => e.checked === true)
    const num = newArr.reduce((prev, item) => prev + +item.goodsCount, 0)
    const totalPri = newArr.reduce((prev, item) => prev + +item.goodsCount * item.goodsPrice, 0)
    document.querySelector(".choose").innerHTML = num
    document.querySelector(".pro_price").innerHTML = totalPri
}


// 加减效果
document.querySelector("tbody").addEventListener("click", function (e) {
    if (e.target.tagName === "A") {
        let flag = true;
        if (e.target.dataset.name === "minus") {
            if (flag) {
                const trIndex = +e.target.parentNode.parentNode.parentNode.dataset.index
                console.log(trIndex);
                // let index = arr.findIndex(item => item.id === +trIndex)
                arr[trIndex].goodsCount--
                if (arr[trIndex].goodsCount <= 1) {
                    flag = false
                    arr[trIndex].goodsCount = 1
                    e.target.style.color = '#bebebe';
                } else {
                    flag = true;
                    e.target.style.color = '#000';
                }
                localStorage.setItem("mes", JSON.stringify(arr))
                rendon(arr)
            }
        }
        if (e.target.dataset.name === "add") {
            const trIndex = +e.target.parentNode.parentNode.parentNode.dataset.index
            arr[trIndex].goodsCount++
            if (arr[trIndex].goodsCount > 1) {
                flag = true
                e.target.previousElementSibling.style.color = '#000';
            }
            localStorage.setItem("mes", JSON.stringify(arr))
            rendon(arr)
        }
    }
})

// 删除效果
const tbody = document.querySelector("tbody")
const popMain = document.querySelector(".pop_main")
tbody.addEventListener("click", function (e) {
    if (e.target.tagName === "SPAN") {
        if (e.target.dataset.name === "del") {
            document.querySelector(".pop_main").style.display = "block"
        }
    }
    if (popMain.style.display === "block") {
        popMain.addEventListener("click", function (e) {
            if (e.target.tagName === "BUTTON") {
                if (e.target.dataset.name === "confirm") {
                    popMain.style.display = "none"
                    const trIndex = document.querySelector(".pop_show").parentNode.parentNode.dataset.index
                    arr.splice(trIndex, 1)
                    localStorage.setItem("mes", JSON.stringify(arr))
                    rendon(arr)
                } else if (e.target.dataset.name === "cancel") {
                    popMain.style.display = "none"
                }
            }
            if (e.target.tagName === "I") {
                popMain.style.display = "none"
            }
        })
    }
})
// 下拉框显示

// 轮播图
const lis = document.querySelectorAll('.carousel-item')
const prev = document.querySelector('.carousel-prev')
const next = document.querySelector('.carousel-next')
const circle = document.querySelectorAll('.carousel-indicator span')
let index = 0
prev.addEventListener('click', function () {
    index--
    if (index < 0) {
        index = 3
    }
    document.querySelector('.carousel-item.fade').classList.remove('fade')
    lis[index].classList.add('fade')
    document.querySelector('.carousel-indicator span.active').classList.remove('active')
    circle[index].classList.add('active')
})
next.addEventListener('click', function () {
    index++
    if (index > 3) {
        index = 0
    }
    document.querySelector('.carousel-item.fade').classList.remove('fade')
    lis[index].classList.add('fade')
    document.querySelector('.carousel-indicator span.active').classList.remove('active')
    circle[index].classList.add('active')
})

for (let i = 0; i < circle.length; i++) {
    circle[i].addEventListener('click', function () {
        document.querySelector('.carousel-indicator span.active').classList.remove('active')
        circle[i].classList.add('active')
        index = i
        document.querySelector('.carousel-item.fade').classList.remove('fade')
        lis[index].classList.add('fade')
    })
}


// 页面跳转
document.querySelector(".settlement").addEventListener("click", function () {
    location.href = "../html/settle.html"
})
 shoppingsss(goodArr)

let username = localStorage.getItem("uname")

const li1 = document.querySelector(".xtx_navs li:nth-child(1)")
const li2 = document.querySelector(".xtx_navs li:nth-child(2)")
if (username) {
    li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user">${username}</i></a>`
    li2.innerHTML = '<a href="javascript:;">退出登录</a>'
} else {
    li1.innerHTML = '<a href="../html/login.html">请先登录</a>'
    li2.innerHTML = '<a href="../html/register.html">免费注册</a>'
}
// 退出登录
li2.addEventListener("click", function () {
    // 退出登录
    //  删除localStroage的uuu的数据
    localStorage.removeItem("uname")
    location.reload(true)
})